<template>
  <el-container v-loading="loading">
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="120px">
        <el-form-item label="选择客服分类" prop="room_id">
          <el-cascader
            v-model="form.model.room_id"
            :options="roomIdSelect"
            :props="{
              label: 'name',
              value: 'value',
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
            placeholder="请选择"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.model.name" placeholder="请输入标题名称"></el-input>
        </el-form-item>
        <el-form-item label="标题内容" prop="content">
          <div>
            <sa-editor v-model:content="form.model.content"></sa-editor>
          </div>
        </el-form-item>
        <el-form-item label="权重">
          <el-input v-model="form.model.weigh" placeholder="请输入权重" type="number"></el-input>
        </el-form-item>
        <el-form-item label="显示状态" prop="status">
          <el-radio-group v-model="form.model.status">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="hidden">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="modal.params.type == 'add'"
        v-auth="'chat.admin.commonword.add'"
        type="primary"
        @click="confirm"
        >保存</el-button
      >
      <el-button
        v-if="modal.params.type == 'edit'"
        v-auth="'chat.admin.commonword.edit'"
        type="primary"
        @click="confirm"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>

<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import chatApi from '@/app/chat/api';
  import SaEditor from '@/sheep/components/sa-editor/sa-editor.vue';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  // 添加 编辑 form
  let formRef = ref(null);
  const form = reactive({
    model: {
      room_id: 0,
      name: '',
      content: '',
      status: 'normal',
      weigh: 0,
    },
    rules: {
      room_id: [
        {
          required: true,
          message: '请选择选择客服分类',
          trigger: ['blur', 'change'],
        },
      ],
      name: [
        {
          required: true,
          message: '请输入标题名称',
          trigger: ['blur', 'change'],
        },
      ],
      content: [
        {
          required: true,
          message: '请输入文章内容',
          trigger: ['blur', 'change'],
        },
      ],
    },
  });

  const loading = ref(false);
  // 富文本显隐
  const showEditor = ref(false);

  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await chatApi.admin.commonWord.detail(id);
    error === 0 && (form.model = data);
    showEditor.value = true;
    loading.value = false;
  }

  // 所属分类选项
  let roomIdSelect = ref([]);
  async function getChatCofig() {
    const { error, data } = await chatApi.chatInit();
    if (error === 0) {
      roomIdSelect.value = data.default_rooms;
    }
  }

  // 表单关闭时提交
  function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      let { error } =
        props.modal.params.type == 'add'
          ? await chatApi.admin.commonWord.add(submitForm)
          : await chatApi.admin.commonWord.edit(props.modal.params.id, submitForm);

      error == 0 && emit('modalCallBack', { event: 'confirm' });
    });
  }

  onMounted(async () => {
    await getChatCofig();
    if (props.modal.params.type == 'edit') {
      getDetail(props.modal.params.id);
    }
  });
</script>
<style lang="scss" scoped>
  .style-wrap {
    width: 100%;
    .style-font {
      padding-right: 24px;
      flex: 1;
    }
  }
  .images-item {
    margin: 0 8px 8px 0;
  }
  .tag-item {
    margin: 0 8px 8px 0;
  }
</style>
